<template>
    <div class="activity-phone-preview-wrap" :style="phonePreviewStyle">
        <img v-if="showHeader" src="@/assets/image/phonePreview/activity_phone_title.png" class="phone-state" />
        <div class="activity-phone-poster">
            <el-scrollbar :height="scrollHeight">
                <slot></slot>
            </el-scrollbar>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { isNumber } from 'lodash';

const props = withDefaults(
    defineProps<{
        /** 样机宽度，高度会根据9:16自动计算最小高度 */
        width?: string | number;
        /** 滚动条高度 */
        scrollHeight?: string | number;
        scale?: number;
        /** 是否展示头部手机状态 */
        showHeader: boolean;
    }>(),
    {
        width: 320,
        scale: 1,
        scrollHeight: '68vh',
        showHeader: true
    }
);

const phonePreviewStyle = computed(() => {
    return {
        '--width': isNumber(props.width) ? props.width + 'px' : props.width,
        transform: `scale(${props.scale})`
    };
});
</script>

<style scoped lang="scss">
.activity-phone-poster {
    position: relative;
    z-index: 2;
    background-color: #fbfbfb;
    vertical-align: middle;
    background-color: rgba(240, 245, 247, 1);
    overflow: hidden;
    border-radius: 30px;
    > :deep(.el-scrollbar) {
        .el-scrollbar__view,
        .el-scrollbar__wrap {
            vertical-align: middle;
        }
        .el-scrollbar__wrap {
            min-height: calc(var(--width) * 16 / 9);
        }
    }

    &:not(:first-child) {
        border-radius: 0 0 30px 30px;
    }
}

.phone-state {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #fcfcfc;
    vertical-align: middle;
    border-radius: 30px 30px 0 0;
}
.activity-phone-preview-wrap {
    padding: 10px;
    border-radius: 40px;
    background-color: #f0f5f7;
    box-shadow: inset 0px 2px 4px 0px #d9e7e8;
    width: var(--width);
}
</style>
